<template>
	<div id="marks">

		<div class="marks_table">
			<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
				<el-tab-pane :label="item.name" :name="'first'+index" :class="[{'active':currentType==item.id}]" @click="changeType(item.id,index)" v-for="(item,index) in categoryData" :key="item.id">
					<div class="content_table">
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column prop="title" label="发标标题" width="180">
							</el-table-column>
							<el-table-column label="招标类别" width="180" prop="wayCN">

							</el-table-column>
							<el-table-column prop="qty" label="数量">
								<template slot-scope="scope">
									{{scope.row.qty}}{{scope.row.unitIdCN}}
								</template>
							</el-table-column>
							<el-table-column prop="expirationDate" label="截止日期">
							</el-table-column>
							<el-table-column prop="status" label="状态">
								<template slot-scope="scope">
									<span class="statecolor" :class="[markstatus(scope.row.status)]">
													{{scope.row.statusCN}}
												</span>

								</template>
							</el-table-column>
							<el-table-column prop="status" label="操作">
								<template slot-scope="scope">
									<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">查看</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination my-flex-center">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchCondition.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</div>
				</el-tab-pane>

			</el-tabs>
		</div>

	</div>
</template>

<script>
	import $ from 'jquery';
	import service from '@/js/services/markservice.js';
	export default {

		data() {
			return {
				currrentId: 3,
				activeName2: 'first0',
				categoryData: [{
					id: '',
					name: '全部',
					num: 0
				}, {
					id: 'mark_noDeal',
					name: '未审核',
					num: 1
				}, {
					id: 'promised',
					name: '招标中',
					num: 2
				}, {
					id: 'mark_completed',
					name: '已完成',
					num: 3
				}, {
					id: 'mark_expired',
					name: '已过期',
					num: 4
				}, {
					id: 'mark_refuse',
					name: '已拒绝',
					num: 5
				}],
				currentType: '',
				currentIndex: 0,
				tableData: [],
				total: 0,
				searchCondition: {
					status: '',
					pageNum: 1,
					pageSize: 10
				},
				type: '',
				cancelOrder: {
					businessId: 0,
					applyReason: ''
				},
			}
		},
		mounted() {
			this.getMarks();
			//			let arr = ['trade_status'];
			//			this.tool.getDirByKey(this, arr);
			//			this.currentType=sessionStorage.getItem('currentMarkType') || '';
			//			this.currentIndex=sessionStorage.getItem('currentIndex') || 0;
		},
		methods: {
			...service,
			handleDetail(index, row) {
				this.$router.push({
					path: '/marks/markdetail',
					query: {
						id: row.id,
						status: row.status
					}
				});
			},

			handleCurrentChange(val) { //翻页
				this.searchCondition.pageNum = val;
				this.getMarks();
			},
			handleSizeChange(val) { //每页数量
				this.searchCondition.PageSize = val;
				this.getMarks();
			},
			changeType(id, index) {
				this.currentType = id;
				this.currentIndex = index;
				this.getMarks();
				//				sessionStorage.setItem('currentMarkType', this.currentType);
				//				sessionStorage.setItem('currentIndex', this.currentIndex);
			},
			markstatus(type) {
				if(type == 'mark_noDeal') {
					return 'weishen';
				} else if(type == 'mark_refuse') {
					return 'refuse';
				} else if(type == 'mark_expired') {
					return 'expired';
				} else if(type == 'mark_completed') {
					return 'complete';
				}
			},
			handleClick(tab, event) {
				let activeName = event.target.getAttribute('id').split('-')[1];
				switch(activeName) {
					case 'first0':
						this.currentType = '';
						break;
					case 'first1':
						this.currentType = 'mark_noDeal';
						break;
					case 'first2':
						this.currentType = 'promised';
						break;
					case 'first3':
						this.currentType = 'mark_completed';
						break;
					case 'first4':
						this.currentType = 'mark_expired';
						break;
					case 'first5':
						this.currentType = 'mark_refuse';
						break;
				}

				console.log(activeName)
				this.getMarks();
			},

		}
	}
</script>

<style lang="less" src="../../less/page/mark/mark.less"></style>